<template>
  <div class="import-audit-page">
    <!-- Top Bar: 批次信息和操作 -->
    <el-card
      class="header-card"
      shadow="never"
    >
      <div class="header-row">
        <div class="batch-info">
          <h2>导入审核</h2>
          <el-tag
            v-if="batchInfo"
            :type="getBatchStatusType(batchInfo.status)"
            size="large"
            style="margin-left: 16px"
          >
            {{ getBatchStatusText(batchInfo.status) }}
          </el-tag>
          <span
            v-if="batchInfo"
            class="batch-meta"
          >
            批次ID: {{ batchInfo.id.slice(0, 8) }}... | 文件: {{ batchInfo.filename }} | 记录数: {{ batchInfo.record_count }}
          </span>
        </div>
        <div class="header-actions">
          <el-button
            :icon="Download"
            @click="handleExport"
          >
            导出CSV
          </el-button>
          <el-button
            type="primary"
            :icon="Check"
            :loading="finalizing"
            @click="handleFinalize"
          >
            Finalize (写入Leads表)
          </el-button>
        </div>
      </div>
    </el-card>

    <!-- 统计卡片 -->
    <el-row
      v-if="statistics"
      :gutter="16"
      style="margin-top: 16px"
    >
      <el-col :span="4">
        <el-card
          shadow="hover"
          class="stat-card"
        >
          <el-statistic
            title="总记录数"
            :value="statistics.total_records"
          />
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card
          shadow="hover"
          class="stat-card stat-pending"
        >
          <el-statistic
            title="待审核"
            :value="statistics.status_breakdown.pending"
          />
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card
          shadow="hover"
          class="stat-card stat-confirmed"
        >
          <el-statistic
            title="已确认"
            :value="statistics.status_breakdown.confirmed"
          />
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card
          shadow="hover"
          class="stat-card stat-rejected"
        >
          <el-statistic
            title="已拒绝"
            :value="statistics.status_breakdown.rejected"
          />
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card
          shadow="hover"
          class="stat-card"
        >
          <el-statistic
            title="重复数"
            :value="statistics.duplicates_count"
          />
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card
          shadow="hover"
          class="stat-card"
        >
          <el-statistic
            title="平均置信度"
            :value="Number((statistics.average_confidence * 100).toFixed(1))"
            suffix="%"
          />
        </el-card>
      </el-col>
    </el-row>

    <!-- 主内容区域 -->
    <el-row
      :gutter="16"
      style="margin-top: 16px"
    >
      <!-- Left Pane: 过滤器 -->
      <el-col :span="4">
        <el-card
          shadow="never"
          class="filter-card"
        >
          <h3>过滤器</h3>
          <el-form label-position="top">
            <el-form-item label="状态">
              <el-select
                v-model="filterStatus"
                placeholder="全部"
                clearable
                style="width: 100%"
                @change="handleFilterChange"
              >
                <el-option
                  label="待审核"
                  value="pending"
                />
                <el-option
                  label="已确认"
                  value="confirmed"
                />
                <el-option
                  label="已拒绝"
                  value="rejected"
                />
                <el-option
                  label="错误"
                  value="error"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="置信度">
              <el-slider
                v-model="confidenceRange"
                :min="0"
                :max="100"
                range
                :marks="confidenceMarks"
                @change="handleFilterChange"
              />
            </el-form-item>

            <el-form-item label="重复状态">
              <el-checkbox
                v-model="showDuplicatesOnly"
                @change="handleFilterChange"
              >
                仅显示有重复的记录
              </el-checkbox>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>

      <!-- Main Table: 记录列表 -->
      <el-col :span="selectedRecord ? 14 : 20">
        <el-card
          shadow="never"
          class="table-card"
        >
          <div class="table-toolbar">
            <div class="toolbar-left">
              <el-button
                type="primary"
                size="small"
                :disabled="selectedRecords.length === 0"
                @click="handleBulkConfirm"
              >
                批量确认 ({{ selectedRecords.length }})
              </el-button>
              <el-button
                type="danger"
                size="small"
                :disabled="selectedRecords.length === 0"
                @click="handleBulkReject"
              >
                批量拒绝 ({{ selectedRecords.length }})
              </el-button>
              <el-text
                v-if="selectedRecords.length > 20"
                type="danger"
                size="small"
                style="margin-left: 12px"
              >
                ⚠️ 已选择{{ selectedRecords.length }}条，超过限制！请减少至20条以内
              </el-text>
              <el-text
                v-else-if="selectedRecords.length > 0"
                type="info"
                size="small"
                style="margin-left: 12px"
              >
                已选择{{ selectedRecords.length }}条（最多20条）
              </el-text>
            </div>
            <el-input
              v-model="searchText"
              placeholder="搜索姓名或电话"
              clearable
              style="width: 300px"
              :prefix-icon="Search"
              @input="handleSearch"
            />
          </div>
          <el-alert
            type="info"
            :closable="false"
            show-icon
            style="margin-bottom: 16px"
          >
            <template #title>
              批量操作说明：每次批量确认或拒绝最多支持20条记录，AI自动化标签提取也限制为20条。如需处理更多记录，请分批操作。
            </template>
          </el-alert>

          <el-table
            v-loading="loading"
            :data="displayRecords"
            stripe
            border
            highlight-current-row
            @selection-change="handleSelectionChange"
            @current-change="handleRowClick"
          >
            <el-table-column
              type="selection"
              width="50"
            />

            <el-table-column
              prop="id"
              label="ID"
              width="70"
            />

            <el-table-column
              label="姓名"
              width="120"
            >
              <template #default="{ row }">
                <span>{{ row.normalized_data.name }}</span>
              </template>
            </el-table-column>

            <el-table-column
              label="电话"
              width="140"
            >
              <template #default="{ row }">
                <span>{{ row.normalized_data.phone }}</span>
              </template>
            </el-table-column>

            <el-table-column
              label="区域"
              width="100"
            >
              <template #default="{ row }">
                <span>{{ row.normalized_data.area || '-' }}</span>
              </template>
            </el-table-column>

            <el-table-column
              label="AI标签"
              min-width="180"
            >
              <template #default="{ row }">
                <div
                  v-if="row.ai_tags && row.ai_tags.tags && row.ai_tags.tags.length > 0"
                  class="ai-tags"
                >
                  <el-tag
                    v-for="(tag, index) in row.ai_tags.tags.slice(0, 3)"
                    :key="index"
                    size="small"
                    style="margin-right: 4px"
                  >
                    {{ tag.name }}
                  </el-tag>
                </div>
                <span
                  v-else
                  style="color: #999"
                >-</span>
              </template>
            </el-table-column>

            <el-table-column
              label="置信度"
              width="100"
            >
              <template #default="{ row }">
                <el-tag
                  :type="getConfidenceType(row.confidence)"
                  size="small"
                >
                  {{ (row.confidence * 100).toFixed(0) }}%
                </el-tag>
              </template>
            </el-table-column>

            <el-table-column
              label="重复"
              width="80"
              align="center"
            >
              <template #default="{ row }">
                <el-badge
                  v-if="row.duplicate_candidates && row.duplicate_candidates.candidates.length > 0"
                  :value="row.duplicate_candidates.candidates.length"
                  type="warning"
                >
                  <el-icon
                    :size="18"
                    color="#ff9800"
                  >
                    <Warning />
                  </el-icon>
                </el-badge>
                <span
                  v-else
                  style="color: #999"
                >-</span>
              </template>
            </el-table-column>

            <el-table-column
              label="状态"
              width="100"
            >
              <template #default="{ row }">
                <el-tag :type="getStatusType(row.status)">
                  {{ getStatusText(row.status) }}
                </el-tag>
              </template>
            </el-table-column>

            <el-table-column
              label="操作"
              width="160"
              fixed="right"
            >
              <template #default="{ row }">
                <el-button
                  v-if="row.status === 'pending'"
                  type="success"
                  link
                  size="small"
                  @click.stop="handleConfirmRecord(row)"
                >
                  确认
                </el-button>
                <el-button
                  v-if="row.status === 'pending'"
                  type="danger"
                  link
                  size="small"
                  @click.stop="handleRejectRecord(row)"
                >
                  拒绝
                </el-button>
                <el-button
                  type="primary"
                  link
                  size="small"
                  @click.stop="handleEditRecord(row)"
                >
                  编辑
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <div class="pagination">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :total="filteredRecords.length"
              :page-sizes="[20, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper"
            />
          </div>
        </el-card>
      </el-col>

      <!-- Right Pane: 详情面板 -->
      <el-col
        v-if="selectedRecord"
        :span="6"
      >
        <el-card
          shadow="never"
          class="detail-card"
        >
          <div class="detail-header">
            <h3>记录详情</h3>
            <el-button
              :icon="Close"
              text
              @click="selectedRecord = null"
            />
          </div>

          <el-descriptions
            :column="1"
            border
            size="small"
          >
            <el-descriptions-item label="记录ID">
              {{ selectedRecord.id }}
            </el-descriptions-item>
            <el-descriptions-item label="姓名">
              {{ selectedRecord.normalized_data.name }}
            </el-descriptions-item>
            <el-descriptions-item label="拼音">
              {{ selectedRecord.normalized_data.name_pinyin || '-' }}
            </el-descriptions-item>
            <el-descriptions-item label="电话">
              {{ selectedRecord.normalized_data.phone }}
            </el-descriptions-item>
            <el-descriptions-item label="区域">
              {{ selectedRecord.normalized_data.area || '-' }}
            </el-descriptions-item>
            <el-descriptions-item label="需求类型">
              {{ selectedRecord.normalized_data.demand_type || '-' }}
            </el-descriptions-item>
            <el-descriptions-item label="预算范围">
              {{ selectedRecord.normalized_data.budget_range || '-' }}
            </el-descriptions-item>
            <el-descriptions-item label="备注">
              <div class="notes-text">
                {{ selectedRecord.normalized_data.notes || '-' }}
              </div>
            </el-descriptions-item>
          </el-descriptions>

          <!-- AI标签 -->
          <div
            v-if="selectedRecord.ai_tags && selectedRecord.ai_tags.tags && selectedRecord.ai_tags.tags.length > 0"
            class="detail-section"
          >
            <h4>AI标签</h4>
            <div class="tag-list">
              <el-tag
                v-for="(tag, index) in selectedRecord.ai_tags.tags"
                :key="index"
                style="margin: 4px"
              >
                {{ tag.name }} ({{ (tag.confidence * 100).toFixed(0) }}%)
              </el-tag>
            </div>
            <el-text
              size="small"
              type="info"
            >
              提取方式: {{ selectedRecord.ai_tags.method }}
            </el-text>
          </div>

          <!-- 重复候选 -->
          <div
            v-if="selectedRecord.duplicate_candidates && selectedRecord.duplicate_candidates.candidates.length > 0"
            class="detail-section"
          >
            <h4>重复候选记录</h4>
            <div
              v-for="(candidate, index) in selectedRecord.duplicate_candidates.candidates"
              :key="index"
              class="duplicate-item"
            >
              <div class="duplicate-header">
                <el-tag
                  :type="getDuplicateCategoryType(candidate.category)"
                  size="small"
                >
                  {{ candidate.category }}
                </el-tag>
                <span class="duplicate-score">相似度: {{ (candidate.score * 100).toFixed(0) }}%</span>
              </div>
              <div class="duplicate-info">
                <span>匹配类型: {{ candidate.match_type }}</span>
                <span v-if="candidate.lead_id">Lead ID: {{ candidate.lead_id }}</span>
              </div>
            </div>
          </div>

          <!-- 原始数据 -->
          <div class="detail-section">
            <h4>原始数据</h4>
            <el-descriptions
              :column="1"
              border
              size="small"
            >
              <el-descriptions-item
                v-for="(value, key) in selectedRecord.original_data"
                :key="key"
                :label="String(key)"
              >
                {{ value }}
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 编辑对话框 -->
    <el-dialog
      v-model="editDialogVisible"
      title="编辑记录"
      width="600px"
    >
      <el-form
        v-if="editingRecord"
        label-width="100px"
      >
        <el-form-item label="姓名">
          <el-input v-model="(editingRecord.normalized_data as any).name" />
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="(editingRecord.normalized_data as any).phone" />
        </el-form-item>
        <el-form-item label="区域">
          <el-input v-model="(editingRecord.normalized_data as any).area" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="(editingRecord.normalized_data as any).notes"
            type="textarea"
            :rows="3"
          />
        </el-form-item>
        <el-form-item label="审核备注">
          <el-input
            v-model="(editingRecord as any).review_notes"
            type="textarea"
            :rows="2"
            placeholder="可选：添加审核备注"
          />
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="(editingRecord as any).status"
            style="width: 100%"
          >
            <el-option
              label="待审核"
              value="pending"
            />
            <el-option
              label="已确认"
              value="confirmed"
            />
            <el-option
              label="已拒绝"
              value="rejected"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editDialogVisible = false">
          取消
        </el-button>
        <el-button
          type="primary"
          @click="handleSaveEdit"
        >
          保存
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
defineOptions({ name: 'ImportAuditPage' })
/**
 * 导入审核主页面
 * 实现完整的导入记录审核工作流
 */
import { ref, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { importAuditApi } from '@/api'
import notify from '@/utils/notify'
import type {
  ImportBatch,
  ImportRecord,
  ImportBatchStatistics,
  ImportRecordUpdate,
  ImportRecordStatus,
} from '@/api/types'
import {
  Download,
  Check,
  Search,
  Warning,
  Close,
} from '@element-plus/icons-vue'

// ========== 路由和数据 ==========
const route = useRoute()
const batchId = route.params.batchId as string

const batchInfo = ref<ImportBatch | null>(null)
const statistics = ref<ImportBatchStatistics | null>(null)
const records = ref<ImportRecord[]>([])
const loading = ref(false)
const finalizing = ref(false)

// ========== 过滤器状态 ==========
const filterStatus = ref<string>('')
const confidenceRange = ref<number[]>([0, 100])
const showDuplicatesOnly = ref(false)
const searchText = ref('')

const confidenceMarks: Record<number, string> = {
  0: '0%',
  50: '50%',
  75: '75%',
  100: '100%',
}

// ========== 表格状态 ==========
const selectedRecords = ref<ImportRecord[]>([])
const selectedRecord = ref<ImportRecord | null>(null)
const currentPage = ref(1)
const pageSize = ref(20)

// ========== 编辑对话框 ==========
const editDialogVisible = ref(false)
const editingRecord = ref<ImportRecord | null>(null)

// ========== 计算属性 ==========

/**
 * 根据过滤条件筛选记录
 */
const filteredRecords = computed(() => {
  let result = records.value

  // 状态过滤
  if (filterStatus.value) {
    result = result.filter((r) => r.status === filterStatus.value)
  }

  // 置信度过滤
  const minConfidence = confidenceRange.value[0] / 100
  const maxConfidence = confidenceRange.value[1] / 100
  result = result.filter(
    (r) => r.confidence >= minConfidence && r.confidence <= maxConfidence
  )

  // 重复记录过滤
  if (showDuplicatesOnly.value) {
    result = result.filter(
      (r) => r.duplicate_candidates && r.duplicate_candidates.candidates.length > 0
    )
  }

  // 搜索文本过滤
  if (searchText.value) {
    const search = searchText.value.toLowerCase()
    result = result.filter(
      (r) =>
        String((r.normalized_data as any).name || '').toLowerCase().includes(search) ||
        String((r.normalized_data as any).phone || '').toLowerCase().includes(search)
    )
  }

  return result
})

/**
 * 分页后的显示记录
 */
const displayRecords = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredRecords.value.slice(start, end)
})

// ========== 方法 ==========

/**
 * 加载批次信息
 */
const loadBatchInfo = async () => {
  try {
    batchInfo.value = await importAuditApi.getBatch(batchId)
  } catch (error) {
    notify.error('加载批次信息失败')
  }
}

/**
 * 加载统计信息
 */
const loadStatistics = async () => {
  try {
    statistics.value = await importAuditApi.getStatistics(batchId)
  } catch (error) {
    notify.error('加载统计信息失败')
  }
}

/**
 * 加载记录列表
 */
const loadRecords = async () => {
  loading.value = true
  try {
    records.value = await importAuditApi.getRecords(batchId, {
      limit: 1000, // 加载所有记录，前端分页
    })
  } catch (error) {
    notify.error('加载记录失败')
  } finally {
    loading.value = false
  }
}

/**
 * 刷新所有数据
 */
const refreshData = async () => {
  await Promise.all([loadBatchInfo(), loadStatistics(), loadRecords()])
}

/**
 * 处理过滤条件变化
 */
const handleFilterChange = () => {
  currentPage.value = 1
}

/**
 * 处理搜索
 */
const handleSearch = () => {
  currentPage.value = 1
}

/**
 * 处理表格选择变化
 */
const handleSelectionChange = (selection: ImportRecord[]) => {
  selectedRecords.value = selection
}

/**
 * 处理行点击
 */
const handleRowClick = (row: ImportRecord | undefined) => {
  selectedRecord.value = row || null
}

/**
 * 确认单条记录
 */
const handleConfirmRecord = async (record: ImportRecord) => {
  try {
    await importAuditApi.updateRecord(record.id, { status: 'confirmed' })
    notify.success('记录已确认')
    await refreshData()
  } catch (error) {
    notify.error('操作失败')
  }
}

/**
 * 拒绝单条记录
 */
const handleRejectRecord = async (record: ImportRecord) => {
  try {
    await importAuditApi.updateRecord(record.id, { status: 'rejected' })
    notify.success('记录已拒绝')
    await refreshData()
  } catch (error) {
    notify.error('操作失败')
  }
}

/**
 * 编辑记录
 */
const handleEditRecord = (record: ImportRecord) => {
  editingRecord.value = JSON.parse(JSON.stringify(record)) // 深拷贝
  editDialogVisible.value = true
}

/**
 * 保存编辑
 */
const handleSaveEdit = async () => {
  if (!editingRecord.value) return

  try {
    const updateData: ImportRecordUpdate = {
      normalized_data: editingRecord.value.normalized_data,
      status: editingRecord.value.status as ImportRecordStatus,
      review_notes: editingRecord.value.review_notes,
    }
    await importAuditApi.updateRecord(editingRecord.value.id, updateData)
    notify.success('记录已更新')
    editDialogVisible.value = false
    await refreshData()
  } catch (error) {
    notify.error('保存失败')
  }
}

/**
 * 批量确认
 */
const handleBulkConfirm = async () => {
  if (selectedRecords.value.length === 0) return

  // 验证数量限制
  if (selectedRecords.value.length > 20) {
    notify.error(`批量操作最多支持20条记录，当前选择了${selectedRecords.value.length}条。请减少选择数量后重试。`)
    return
  }

  try {
    const recordIds = selectedRecords.value.map((r) => r.id)
    const result = await importAuditApi.bulkAction(batchId, {
      record_ids: recordIds,
      action: 'confirm',
    })
    notify.success(`已批量确认 ${result.affected_count} 条记录`)
    selectedRecords.value = []
    await refreshData()
  } catch (error: unknown) {
    // 显示后端返回的具体错误信息
    const axiosError = error as { response?: { data?: { detail?: string } } }
    const errorMsg = axiosError?.response?.data?.detail || '批量操作失败'
    notify.error(errorMsg)
  }
}

/**
 * 批量拒绝
 */
const handleBulkReject = async () => {
  if (selectedRecords.value.length === 0) return

  // 验证数量限制
  if (selectedRecords.value.length > 20) {
    notify.error(`批量操作最多支持20条记录，当前选择了${selectedRecords.value.length}条。请减少选择数量后重试。`)
    return
  }

  try {
    const recordIds = selectedRecords.value.map((r) => r.id)
    const result = await importAuditApi.bulkAction(batchId, {
      record_ids: recordIds,
      action: 'reject',
    })
    notify.success(`已批量拒绝 ${result.affected_count} 条记录`)
    selectedRecords.value = []
    await refreshData()
  } catch (error: unknown) {
    // 显示后端返回的具体错误信息
    const axiosError = error as { response?: { data?: { detail?: string } } }
    const errorMsg = axiosError?.response?.data?.detail || '批量操作失败'
    notify.error(errorMsg)
  }
}

/**
 * 导出CSV
 */
const handleExport = () => {
  notify.info('导出功能开发中')
  // TODO: 实现CSV导出
}

/**
 * Finalize批次
 */
const handleFinalize = async () => {
  if (!statistics.value) return

  const pendingCount = statistics.value.status_breakdown.pending
  if (pendingCount > 0) {
    const confirmed = await notify.confirm(
      `还有 ${pendingCount} 条记录处于待审核状态，确定要Finalize吗？`,
      '提示'
    )
    if (!confirmed) return
  }

  finalizing.value = true
  try {
    const result = await importAuditApi.finalizeBatch(batchId)
    notify.success(
      `Finalize完成：已写入 ${result.finalized_count} 条，跳过 ${result.skipped_count} 条`
    )
    await refreshData()
  } catch (error) {
    notify.error('Finalize失败')
  } finally {
    finalizing.value = false
  }
}

/**
 * 获取批次状态类型
 */
const getBatchStatusType = (status: string) => {
  const typeMap: Record<string, 'success' | 'warning' | 'danger' | 'info'> = {
    processing: 'warning',
    completed: 'success',
    failed: 'danger',
  }
  return typeMap[status] || 'info'
}

/**
 * 获取批次状态文本
 */
const getBatchStatusText = (status: string) => {
  const textMap: Record<string, string> = {
    processing: '处理中',
    completed: '已完成',
    failed: '失败',
  }
  return textMap[status] || status
}

/**
 * 获取记录状态类型
 */
const getStatusType = (status: string) => {
  const typeMap: Record<string, 'success' | 'warning' | 'danger' | 'info'> = {
    pending: 'warning',
    confirmed: 'success',
    rejected: 'danger',
    error: 'danger',
    skipped: 'info',
  }
  return typeMap[status] || 'info'
}

/**
 * 获取记录状态文本
 */
const getStatusText = (status: string) => {
  const textMap: Record<string, string> = {
    pending: '待审核',
    confirmed: '已确认',
    rejected: '已拒绝',
    error: '错误',
    skipped: '跳过',
  }
  return textMap[status] || status
}

/**
 * 获取置信度类型
 */
const getConfidenceType = (confidence: number) => {
  if (confidence >= 0.9) return 'success'
  if (confidence >= 0.75) return 'warning'
  return 'danger'
}

/**
 * 获取重复类别类型
 */
const getDuplicateCategoryType = (category: string) => {
  const typeMap: Record<string, 'success' | 'warning' | 'danger' | 'info'> = {
    exact_duplicate: 'danger',
    high_similarity: 'warning',
    low_similarity: 'info',
  }
  return typeMap[category] || 'info'
}

// ========== 生命周期 ==========
onMounted(async () => {
  await refreshData()
})
</script>

<style scoped>
.import-audit-page {
  padding: 0;
}

.header-card {
  margin-bottom: 0;
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.batch-info {
  display: flex;
  align-items: center;
  flex: 1;
}

.batch-info h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.batch-meta {
  margin-left: 16px;
  color: #666;
  font-size: 14px;
}

.header-actions {
  display: flex;
  gap: 8px;
}

.stat-card {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-pending {
  border-left: 3px solid #ff9800;
}

.stat-confirmed {
  border-left: 3px solid #52c41a;
}

.stat-rejected {
  border-left: 3px solid #f5222d;
}

.filter-card h3 {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
}

.table-card {
  min-height: 600px;
}

.table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.toolbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.detail-card {
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.detail-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.detail-section {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #eee;
}

.detail-section h4 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
}

.notes-text {
  max-height: 100px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.tag-list {
  margin-bottom: 8px;
}

.duplicate-item {
  padding: 12px;
  margin-bottom: 8px;
  background: #f5f5f5;
  border-radius: 4px;
}

.duplicate-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.duplicate-score {
  font-size: 12px;
  font-weight: 600;
  color: #666;
}

.duplicate-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: #666;
}
</style>
